<!--手术跟台采购订单列表 审核-->
<template>
  <div class="purchasing-purchase-wholesale-examine">
    <el-container class="registercard-box">
      <h3 class="title">病人信息</h3>
      <RecordInfo
        :record-form="patientInfoColumns"
        :record-data="topInfo">
        <!-- <template>
          <div
            slot="fileUrl"
            class="file-list">
            <el-form :inline="true">
              <el-form-item
                v-for="(item,index) in topInfo.fileUrl"
                :key="index">
                <el-image
                  :src="item"
                  v-viewer
                  v-show="isJpg(item)==='jpg'" />
                <el-button
                  v-if="isJpg(item)==='pdf'"
                  @click="showPdfDialog(item)"
                  type="text">点击预览</el-button>
                <el-button
                  size="mini"
                  v-if="isJpg(item)==='downLoad'"
                  type="text text-primary"
                  @click="downloadMethod(item)"
                  class="down-load"
                >XLS</el-button>
              </el-form-item>
            </el-form>
          </div>
        </template> -->
      </RecordInfo>
      <file-list
        :file-list-arr="topInfo.fileUrl"
      />
      <h3 class="title">订单信息</h3>
      <RecordInfo
        :record-form="headerFrom"
        :record-data="topInfo">
        <template v-slot:recordInfoslot="slotProp">
          <div class="solt-info">
            <span class="left-span">
              采购产品总数
              <span class="right-span">{{ topInfo.prodCount }}</span>
            </span>
            <span>
              品种数
              <span>{{ topInfo.prodTypeCount }}</span>
            </span>
            <span>
              金额合计（元）:
              <span>
                <span class="price">{{ topInfo.orderTotalAmount | getFormatterPrice }}</span>
              </span>
            </span>
          </div>
        </template>
      </RecordInfo>
      <el-editable
        class="purchase-wholesale-detail-table"
        height="600"
        :data="tableData"
        :columns="listColumns"
      >
        <template
          slot="default-registrationNumber"
          slot-scope="scope">
          <div>
            <cell-registration
              :key="scope.row.registrationNumber"
              :regis-no="scope.row.registrationNumber"
              :content="'注册证已过期，点击查看详细信息'"
              :status="scope.row.isNoExpire"
              :regis-data="scope.row.registrationInfo"
            />
          </div>
          <!-- <el-button
            :disabled="!scope.row.registrationNumber||!scope.row.registrationId"
            v-html="regisNoButton(scope.row)"
            @click="showPdfRegistion(scope.row.registrationId)"
            type="text"
          /> -->
        </template>
      </el-editable>
      <el-dialog
        title="审核驳回"
        :visible.sync="isShowDialog"
        width="30%"
        :before-close="handleClose">
        <div class="dialog-box">
          <div class="cont">
            <p>备注：</p>
            <el-input
              :maxlength="250"
              :rows="6"
              type="textarea"
              v-model="rejectCont"/>
          </div>
          <div class="button">
            <el-button @click="handleClose">取消</el-button>
            <el-button
              type="primary"
              @click="rejectOrder">确定</el-button>
          </div>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import RecordInfo from '@/moduleComponents/beforeSettle/distributorSide/purchasingManagement/record'
import ElEditable from '@components/el-editable'
import { formatDate, getFormatterPrice } from '@const/filter.js'
import { fileUpload } from '@const/api'
import CellRegistration from '@/moduleComponents/common/detail/cell-registration'
import { mapMutations } from 'vuex'
import { hasIn, cloneDeep } from 'lodash'
import {
  hospitalNeedOrderControllerhsp,
  hospitalNeedOrderControllerhspItemList,
  orderAudit,
  orderOverrule
} from '@const/beforeSettleApi'
import {
  statusArr,
  headerPartialCollectionColumns,
  detailPartialCollectionColumnsExamine,
  patientInfoColumns,
  sexMap
} from './const'
import { getCertificate } from '@const/productCenterApiV2'
import fileList from '@/moduleComponents/beforeSettle/fileList'
export default {
  data () {
    return {
      // 订单信息
      headerPartialCollectionColumns,
      // 订单状态枚举
      statusArr,
      // 订单信息列表表头信息
      detailPartialCollectionColumnsExamine,
      // 病人信息
      patientInfoColumns,

      // 订单信息列表
      tableData: [],
      topInfo: {},
      isShowDialog: false,
      rejectCont: ''
    }
  },
  components: {
    RecordInfo,
    ElEditable,
    fileList,
    CellRegistration
  },

  computed: {
    id () {
      return this.$route.query.id
    },
    headerFrom () {
      return this.headerPartialCollectionColumns
    },
    listColumns () {
      return this.detailPartialCollectionColumnsExamine
    }
  },

  filters: {
    getFormatterPrice
  },
  mounted () {
    this.initNavButtons()
    this.getTopInfo()
    this.getOrderListInfo()
  },
  methods: {
    ...mapMutations(['changeLayoutHandle']),
    // 初始化 导航栏 按钮组
    initNavButtons () {
      let arr = [
        { type: 'button', val: '返回', handle: this.back },
        { type: 'danger', val: '驳回', handle: this.toReject },
        { type: 'primary', val: '审核通过', handle: this.toPass }
      ]
      const btn = {
        type: 'btn',
        arr: arr
      }
      this.changeLayoutHandle(btn)
    },
    // 驳回
    toReject () {
      this.isShowDialog = true
    },
    // 确定驳回
    rejectOrder () {
      if (!this.rejectCont) {
        this.$message({
          type: 'warning',
          message: '请输入驳回原因！'
        })
        return
      }
      this.$axios({
        method: 'post',
        url: orderOverrule,
        data: {
          hspFollowId: this.$route.query.id,
          remark: this.rejectCont
        }
      }).then(res => {
        this.$message({
          type: 'warning',
          message: '审核已驳回！'
        })
        this.back()
      })
    },
    // 通过
    toPass () {
      this.$axios({
        method: 'post',
        url: orderAudit + '?hspFollowId=' + this.$route.query.id
      }).then(res => {
        this.$message({
          type: 'success',
          message: '审核已通过！'
        })
        this.back()
      })
    },
    handleClose () {
      this.isShowDialog = false
    },
    // pdf预览
    showPdfDialog (url) {
      this.$pdfViewer({ url, title: 'pdf预览' })
    },
    // 病人信息和订单信息
    getTopInfo () {
      this.$axios({
        method: 'post',
        url: hospitalNeedOrderControllerhsp,
        data: {
          hspFollowId: this.$route.query.id
        }
      }).then(res => {
        let obj = hasIn(res, 'data.payload') ? res.data.payload : {}
        for (let key in obj) {
          obj[key] = obj[key] || ``
          if (key === 'fileUrl') {
            obj[key] = obj[key] || []
          }
          if (!obj[key] || obj[key] === 'null') {
            obj[key] = `--`
          }
          if (key === 'orderStatus') {
            obj[key] = statusArr[obj[key]]
          }
          if (key === 'sickSex') {
            obj[key] = sexMap[obj[key]]
          }
        }
        this.topInfo = obj
        const { fileUrl } = this.topInfo
        this.topInfo.fileUrl = fileUrl || []
        this.topInfo.fileUrl.forEach(item => {
          item.type = item.fileUrl.split('').reverse().join('').split('.')[0].split('').reverse().join('').toLowerCase()
        })
      })
    },
    isJpg (url) {
      let arr = url.split('.')
      let toLowrCaseUrl = arr[arr.length - 1].toLowerCase()
      if (
        toLowrCaseUrl === 'jpg' ||
        toLowrCaseUrl === 'png' ||
        toLowrCaseUrl === 'jpeg' ||
        toLowrCaseUrl === 'bpg'
      ) {
        return 'jpg'
      } else if (toLowrCaseUrl === 'pdf') {
        return 'pdf'
      } else {
        if (toLowrCaseUrl !== '--' || !toLowrCaseUrl) {
          return 'downLoad'
        }
      }
    },
    // 注册证
    regisNoButton (data) {
      if (data.registrationNumber && !data.registrationId) {
        return data.registrationNumber
      } else if (data.registrationNumber && data.registrationId) {
        return data.registrationNumber
      } else if (!data.registrationNumber && data.registrationId) {
        return '暂无注册证号'
      } else if (!data.registrationNumber && !data.registrationId) {
        return '暂无数据'
      }
    },
    // 查看注册证
    showPdfRegistion (id) {
      this.$axios({
        method: 'get',
        url: getCertificate,
        params: {
          id: id
        }
      }).then(res => {
        let obj = hasIn(res, 'data.payload') ? res.data.payload : {}
        let url = obj.pictureUrl
        if (!url) {
          this.$message({
            type: 'warning',
            message: '获取失败，请在产品管理中维护该产品的注册证信息'
          })
        } else {
          this.$pdfViewer({ url, title: '注册证pdf预览' })
        }
      })
    },
    // 下载
    downloadMethod (detailsUploadUrl) {
      window.open(detailsUploadUrl)
    },
    // 获取订单明细
    getOrderListInfo () {
      this.$axios({
        method: 'post',
        url: hospitalNeedOrderControllerhspItemList,
        data: {
          hspFollowId: this.$route.query.id
          //   page: this.page.page,
          //   pageSize: this.page.size
        }
      }).then(res => {
        let obj = hasIn(res, 'data.payload') ? res.data.payload : {}
        this.tableData = obj.content
        this.page.total = obj.totalElements
      })
    },
    // 返回上一级
    back () {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less">
.purchasing-purchase-wholesale-examine {
  height: 100%;
  display: flex;

  .registercard-box {
    flex-direction: column;
    .title {
      padding-left: 16px;
      box-sizing: border-box;
    }
    .patient-title {
      border: 1px solid #999;
      margin: 16px;
    }
    .el-form-item__label {
      width: 110px !important;
    }
    .tab-info {
      padding-bottom: 10px;
    }
    .price {
      color: #000;
    }
    .info-title {
      height: 36px;
      line-height: 36px;
      font-size: 16px;
      padding-left: 16px;
      // background: red;
      span {
        margin-right: 16px;
      }
    }
    .file-list {
      img {
        display: inline-block;
        width: 64px;
        height: 64px;
      }
      button {
        vertical-align: top;
      }
      .down-load {
        color: blue;
        border: 1px solid red;
        padding: 5px 10px;
        box-sizing: border-box;
        margin-top: 5px;
      }
    }
    .el-form-item__content {
      height: 40px;
      line-height: 40px;
      padding-top: 0 !important;
    }
    .solt-info {
      div {
        height: 36px;
        line-height: 36px;
        font-size: 16px;
      }
    }
    .pagination {
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
      padding-right: 0;
    }

    .dialog-box {
      .cont {
        display: flex;
        margin: 10px 0;
        p {
          width: 50px;
        }
      }
      .button {
        display: flex;
        justify-content: flex-end;
        margin-top: 30px;
      }
    }
  }
}
</style>
